<template>
    <div class="edit-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" destroy-on-close>
            <el-tabs type="border-card">
                <el-tab-pane label="导入部门">
                    <div style="display: flex;">
                        <div style="width: 50%;">
                            <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                            <el-checkbox-group v-model="state.checkedOptions" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="item in state.Options" disabled :key="item" :label="item">{{ item
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div style="width: 50%;"> <el-upload class="upload-demo" limit="1" drag action="#" multiple
                                :on-change="handleChange" :http-request="uploadHttpRequest">
                                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                <div class="el-upload__text">
                                    拖动文件 或&nbsp
                                    <em>点击选择</em>
                                </div>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        选择 1 个 xls/xlsx 文件
                                    </div>
                                </template>
                            </el-upload></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit')
                    }}</el-button>
                    <el-button @click="onCancel" size="default">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { readXlsxFile } from '/@/utils/xlsx';
import { usePersonEmployeeOrgImportApi } from '/@/api/person/employee';
import axios from 'axios';
// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);
const checkAll = ref(true);

// 定义变量内容
interface ObjType {
    code: string,
    name: string,
    parentCode: string,
}

const state = reactive({
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '导入',
    },
    Options: ['部门编号', '部门名称', '父部门编号'],
    checkedOptions: [] as string[],
    fileList: [] as any,
});

//全选
const handleCheckAllChange = (val: boolean) => {
    state.checkedOptions = val ? state.Options : []
}

//选择
const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === state.Options.length
}

// 提交
const onSubmit = () => {
    if (state.fileList.length !== 0) {
        usePersonEmployeeOrgImportApi(state.fileList).then(() => {
            ElMessage.success('导入成功');
            state.fileList = []
            emit('refresh');
        }).then(() => {
            closeDialog()
        })
    }
    else {
        ElMessage.error('请选择文件');
    }
};

// 文件上传
const handleChange = (file: any, fileList: any) => {
    readXlsxFile(file.raw).then((res: any) => {
        console.log(res)
        res.map((item: any) => {
            let obj = {} as ObjType
            let keys = Object.keys(item)
            keys.forEach(key => {
                if (state.checkedOptions.includes(key)) {
                    if (key === '部门编号') {
                        obj['code'] = item[key] + ''
                    }
                    if (key === '部门名称') {
                        obj['name'] = item[key]
                    }
                    if (key === '父部门编号') {
                        obj['parentCode'] = item[key] + ''
                    }
                }
            })
            state.fileList.push(obj)
        })
    })
}

const uploadHttpRequest = (data: any) => {
    // console.log(data);
}

// 打开弹窗
const openDialog = (code?: string) => {
    state.dialog.isShowDialog = true
    handleCheckAllChange(true)
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    emit('refresh');
};
// 取消
const onCancel = () => {
    closeDialog();
};

defineExpose({
    openDialog,
});
</script>


<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

:deep(.el-dialog__footer) {
    border-top: 1px dashed rgba(0, 0, 0, .2);
}
</style>